<template>
  <div :bordered="false" style="height:100%;" :bodyStyle="{padding:'10px'}">
    <!-- table区域-begin -->
     <vxe-grid
      id="OfficedocReceivedList"
      ref="vxeTable"
      size="small"
      style="padding:10px;"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      height="100%"
      :pager-config="tablePage"
      @toolbar-button-click="toolbarButtonClickEvent"
    >
      <template v-slot:action="{ row }">
        <a v-if="row.status>0" @click="historyClick(row)">{{[1,7].indexOf(row.status)>=0?'进度':'历史'}}</a>
        <a-divider type="vertical" v-if="row.status === 1" />
        <a-dropdown v-if="row.status === 1">
          <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item >
              <a  @click="urgingClick(row)">催办</a>
            </a-menu-item>
            <a-menu-item >
              <a-popconfirm @confirm="() => handleAbolishTask(row)" title="确定要作废流程吗?">
                <a >作废流程</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item >
              <a-popconfirm @confirm="() => handleRevocation(row)" title="确定要取回流程吗?">
                <a >取回流程</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </vxe-grid>
    <!-- <div>
      <a-table
        size="small"
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="text, record">
          <a v-if="record.status>0" @click="historyClick(record)">{{[1,7].indexOf(record.status)>=0?'进度':'历史'}}</a>
          <a-divider type="vertical" v-if="record.status === 1" />
          <a-dropdown v-if="record.status === 1">
            <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item >
                <a  @click="urgingClick(record)">催办</a>
              </a-menu-item>
              <a-menu-item >
                <a-popconfirm @confirm="() => handleAbolishTask(record)" title="确定要作废流程吗?">
                  <a >作废流程</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item >
                <a-popconfirm @confirm="() => handleRevocation(record)" title="确定要取回流程吗?">
                  <a >取回流程</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </a-table>
    </div> -->
    <task-modal ref="taskModal" type="history_his" :taskData="taskData"></task-modal>
    <!-- <urging-modal ref="urgingModal"></urging-modal> -->
  </div>
</template>

<script>
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import taskModal from '@/views/modules/task/modal/TaskModal'
import { cancellation, revocation, urging } from '@/api/task'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'MyApplyProcessList',
  components: {
    taskModal
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      columns: [// 表头
        { type: 'seq', width: 40 },
        { field: 'instanceName', title: '业务标题', showOverflow: true },
        { field: 'modelName', title: '流程名称', showOverflow: true },
        { field: 'modelKey', title: '流程编号', showOverflow: true },
        { field: 'creator', title: '发起人', showOverflow: true },
        { field: 'startTime', title: '开始时间', showOverflow: true },
        { field: 'endTime', title: '结束时间', showOverflow: true },
        { field: 'totalTime', title: '耗时', showOverflow: true },
        { field: 'status', title: '状态', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('bpmn_status', row.status)
        } }},
        { field: 'action', title: '操作', showOverflow: true, width: 150, slots: { default: 'action' }}
      ],
      url: {
        list: '/activiti/task/getMyCreateTask'
      },
      taskData: {},
      ipagination: {
        total: 0,
        currentPage: 1,
        pageSize: 5
      }
    }
  },
  computed: {
    options() {
      return {
        border: true,
        resizable: true,
        loading: this.loading,
        align: 'center',
        height: this.height,
        'custom-config': { storage: { visible: true, resizable: true }},
        officedocId: ''
      }
    }
  },
  methods: {
    historyClick(record) { // 点击历史
      this.taskData = record
      this.$refs.taskModal.editModalVisible = true
    },
    urgingClick(item) { // 点击催办
      // this.$refs.urgingModal.modalVisible = true
      urging({ procInstId: item.processInstanceId }).then(res => {
        if (res.success) {
          this.$message.success('催办成功')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleAbolishTask(record) {
      cancellation({ procInstId: record.processInstanceId }).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success('流程已作废')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleRevocation(record) {
      revocation({
        procInstId: record.processInstanceId
      }).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success('流程已取回')
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less">

</style>
